<link href="dist/css/interface.css" type="text/css" rel="stylesheet"/>

<section class="content">

	<div class="row search_bar">
		<div class="input-field col s6">
			<input id="icon_prefix" type="text" class="validate col s8">
			<label for="icon_prefix">接口名</label>
			<i class="material-icons prefix col s4">search</i>
		</div>
		<div class="col s6">				
			<div class="fixed-action-btn horizontal click-to-toggle action_btn_style">
				<a class="btn-floating btn-large waves-effect waves-light red">
					<i class="material-icons">menu</i>
				</a>
				<ul>
					<li><a ng-click="ifaceDetail('add')" class="btn-floating waves-effect waves-light teal lighten-1"><i class="material-icons">add</i></a></li>
					<li><a class="btn-floating waves-effect waves-light grey darken-1"><i class="material-icons">close</i></a></li>
				</ul>
			</div>
		</div>
	</div>
	
	<div class="row">
		<div class="col s12">
			<table id="interface_table" class="highlight bordered centered">
				<thead>
					<tr>
						<th>接口名</th>
						<th>接口地址</th>
						<th>接口说明</th>
						<th>模块名</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr ng-repeat="iface in ifaceList">
						<td ng-bind="iface.name"></td>
						<td ng-bind="iface.url"></td>
						<td ng-bind="iface.description"></td>
						<td ng-bind="iface.module"></td>
						<td><i class="material-icons waves-effect" ng-click="ifaceDetail('edit')">mode_edit</i></td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	
	<div class="row">
		<div class="col s12">
			<ul class="pagination center none-select">
				<li ng-class="{true: 'disabled', false: 'waves-effect'}[pageInfo.currentPage === 1]">
					<a href=""><i class="material-icons" ng-click="searchInterface(pageInfo.currentPage-1)">chevron_left</i></a>
				</li>
				<li ng-repeat="page in pageInfo.pageList track by $index" ng-class="{true: 'active', false: 'waves-effect'}[pageInfo.currentPage === page]">
					<a href="" ng-bind="page" ng-click="searchInterface(page)"></a>
				</li>
				<li ng-class="{true: 'disabled', false: 'waves-effect'}[pageInfo.currentPage === pageInfo.pageList.length]">
					<a href=""><i class="material-icons" ng-click="searchInterface(pageInfo.currentPage+1)">chevron_right</i></a>
				</li>
				<span class="right">view {{pageInfo.startPos}} - {{pageInfo.endPos}} of {{pageInfo.totalCount}}<span>
			</ul>
		</div>
	</div>
	
	<!-- Modal Structure -->
	<div id="iface_detail_modal" class="modal">
		<div class="modal-content">
			<div class="row">
				<form class="col s12">
					<div class="row">
						<div class="input-field col s6">
							<input id="first_name" type="text" class="validate"> <label for="first_name">接口名</label>
						</div>
						<div class="input-field col s6">
							<input id="first_name" type="text" class="validate"> <label for="first_name">请求类型</label>
						</div>
					</div>
					<div class="row">
						<div class="input-field col s12">
							<select>
								<option selected>Choose your option</option>
								<option value="1">Option 1</option>
								<option value="2">Option 2</option>
								<option value="3">Option 3</option>
							</select>
							<label>Materialize Select</label>
						</div>
					</div>
					<div class="row">
						<div class="input-field col s12">
							<input id="disabled"
								type="text" class="validate"> <label for="disabled">Disabled</label>
						</div>
					</div>
					<div class="row">
						<div class="input-field col s12">
							<input id="password" type="password" class="validate"> <label
								for="password">Password</label>
						</div>
					</div>
					<div class="row">
						<div class="input-field col s12">
							<input id="email" type="email" class="validate"> <label
								for="email">Email</label>
						</div>
					</div>
				</form>
			</div>
		</div>
		<div class="modal-footer">
            <a class="modal-action modal-close waves-effect waves-red btn-flat">Disagree</a>
            <a class="modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
        </div>
	</div>
</section>
